<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta author="chichi">
<title>系统控制台</title>
<style>
* {
	padding: 0;
	margin: 0;
	list-style: none;
	text-decoration: none;
}
html, body {
	height: 100%;
	width: 100%;
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
	color: #555;
	font-size: 15px;
	line-height: 1.7;
}
input:focus {
	outline: none;
}
canvas {
	display: block;
	vertical-align: bottom;
}
#box {
	width: 100%;
	height: 100%;
	background-color: #F7FAFC;
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.cent-box {
	width: 300px;
	height: 440px;
	vertical-align: middle;
	white-space: normal;
	margin: 0 auto;
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -220px;
}
.register-box {
	height: 490px;
	margin-top: -270px;
}
.cent-box-header {
	text-align: center;
}
.hide {
	font: 0/0 a;
	color: transparent;
	text-shadow: none;
	background-color: transparent;
	border: 0;
}
.cent-box-header .main-title {
	font-size: 60px;
	color: #0f88eb;
	margin: 0 auto;
	background-size: contain;
}
.cent-box-header .sub-title {
	margin: 30px 0 20px;
	color: #0f88eb;
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
}
.clearfix:before {
	content: '';
	display: table;
}
.index-tab {
	text-align: center;
	font-size: 18px;
	margin-bottom: 10px;
}
.index-tab .index-slide-nav {
	display: inline-block;
	position: relative;
}
.index-tab .index-slide-nav a {
	float: left;
	width: 4em;
	line-height: 35px;
	opacity: 0.7;
	-webkit-transition: opacity .15s, color .15s;
	transition: opacity .15s, color .15s;
	color: #555;
}
.index-tab .index-slide-nav a:hover {
 color: #0f88eb： opacity: 1;
}
.index-tab .index-slide-nav a.active {
	opacity: 1;
	color: #0f88eb;
}
.slide-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0 .8em;
	width: 2.4em;
	height: 2px;
	background: #0f88eb;
}
.slide-bar1 {
	left: 4em;
}
.form {
	float: none;
	margin: auto;
	text-align: left;
	width: 300px;
}
.form .group {
	padding: 1px 0;
	border: 1px solid #d5d5d5;
	border-radius: 3px;
}
.form .group .group-ipt {
	position: relative;
	margin: 0;
	overflow: hidden;
}
.form .group .group-ipt input {
	padding: 1em .8em;
	width: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: rgba(255,255,255,0.5);
	font-family: 'Microsoft Yahei';
	color: #666;
	position: relative;
}
#password, #verify, #user, #password1 {
	border-top: 1px solid #e8e8e8;
}
.imgcode {
	width: 95px;
	position: absolute;
	right: 0;
	top: 2px;
	cursor: pointer;
	height: 40px;
}
.button {
	margin-top: 18px;
}
#button {
	width: 100%;
	background: #0f88eb;
	box-shadow: none;
	border: 0;
	border-radius: 3px;
	line-height: 41px;
	color: #fff;
	display: block;
	font-size: 15px;
	cursor: pointer;
	font-family: 'Microsoft Yahei';
}
#button:hover {
	background: #80c3f7;
}
.remember {
	margin-top: 10px;
	line-height: 30px;
}
.remember label {
	display: block;
}
.remember-me {
	font-size: 14px;
	float: left;
	position: relative;
	cursor: pointer;
}
.icon {
	width: 11px;
	height: 11px;
	display: block;
	border: 1px solid #ccc;
	float: left;
	margin-top: 8px;
	margin-right: 5px;
	cursor: pointer;
}
.zt {
	width: 9px;
	height: 9px;
	background: #0f88eb;
	margin: 1px;
	display: block;
}
#remember-me {
	position: absolute;
	left: 0;
	top: 8px;
	opacity: 0;
	cursor: pointer;
}
.forgot-password {
	float: right;
	font-size: 14px;
}
.forgot-password a {
	color: #555;
}
.forgot-password a:hover {
	text-decoration: underline;
}
.footer {
	position: fixed;
	width: 100%;
	height: 40px;
	bottom: 0;
	left: 0;
	text-align: center;
	color: #999;
	z-index: 2;
	padding-bottom: 10px;
	font-size: 13px;
}
.footer a {
	color: #666;
	text-decoration: underline;
}
</style>
<script language="javascript" type="text/javascript">
function ajax(options) {
	options = options || {};
	options.type = (options.type || "GET").toUpperCase();
	options.dataType = options.dataType || "json";
	var params = formatParams(options.data);

	//创建 - 非IE6 - 第一步
	if (window.XMLHttpRequest) {
		var xhr = new XMLHttpRequest();
	} else { //IE6及其以下版本浏览器
		var xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}

	//接收 - 第三步
	xhr.onreadystatechange = function () {
		if (xhr.readyState == 4) {
			var status = xhr.status;
			if (status >= 200 && status < 300) {
				options.success && options.success(xhr.responseText, xhr.responseXML);
			} else {
				options.fail && options.fail(status);
			}
		}
	}

	//连接 和 发送 - 第二步
	if (options.type == "GET") {
		xhr.open("GET", options.url + "?" + params, true);
		xhr.send(null);
	} else if (options.type == "POST") {
		xhr.open("POST", options.url, true);
		//设置表单提交时的内容类型
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send(params);
	}
}

//格式化参数
function formatParams(data) {
	var arr = [];
	for (var name in data) {
		arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
	}
	arr.push(("v=" + Math.random()).replace(".",""));
	return arr.join("&");
}	

function login(){
	var loginName = document.getElementById('loginName').value;
	var password = document.getElementById('password').value;
	if(loginName == null || loginName == ''){
		alert('请输入用户名。');
		return false;
	}
	if(password == null || password == ''){
		alert('请输入密码。');
		return false;
	}
	
	var hostUrl = window.location.protocol + '//' + window.location.host ;
    ajax({
        url: hostUrl + '/login.do',//请求地址
        type: "POST", //请求方式
        data: { loginName: loginName, password: password },//请求参数
        dataType: "json",
        success: function (response, xml) {
			if (response == 'success'){
				window.location.replace(hostUrl + '/index.jsp');
			}else{
				alert("用户名或密码错误，请重新输入！");
				document.getElementById('password').focus();
				return false;
			}
        },
        fail: function (status) {
            // 此处放失败后执行的代码
			return false;
        }
    });
	return false;
}
</script>
</head>
<body>
<div id="box"></div>
<div class="cent-box">
  <div class="cent-box-header"> 
    <!--    <h1 class="main-title">公司名称</h1>-->
    <h2 class="sub-title">系统控制台</h2>
  </div>
  <div class="cont-main clearfix">
    <form action="" onSubmit="return login()">
      <div class="login form">
        <div class="group">
          <div class="group-ipt email">
            <input type="text" name="loginName" id="loginName" class="ipt" placeholder="用户名" required>
          </div>
          <div class="group-ipt password">
            <input type="password" name="password" id="password" class="ipt" placeholder="密码" required>
          </div>
        </div>
      </div>
      <div class="button">
        <button type="submit" class="login-btn register-btn" id="button">登　　录</button>
      </div>
    </form>
    <!--		<div class="remember clearfix">
			<label class="remember-me"><span class="icon"><span class="zt"></span></span><input type="checkbox" name="remember-me" id="remember-me" class="remember-mecheck" checked>记住我</label>
			<label class="forgot-password">
				<a href="#">忘记密码？</a>
			</label>
		</div>--> 
  </div>
</div>
<div class="footer">
  <p>2015-2017 © 公司名称 版权所有</p>
  <p><a href="http://www.miitbeian.gov.cn" target="_blank">粤ICP备16042633</a></p>
</div>
</body>
</html>